<template>
  <view class="xllb" :style="{ 'background': 'url('+gifUrl+') 15% 10% / 3000% no-repeat'}">
    <view @click="navigateBtn()" class="play_back">
      <image src="@/static/img/play_back.png" mode=""></image>
    </view>
    <view class="content" v-if="zthead">
      <view class="swiperItem">
        <swiper class="swiper3" :duration="1000" circular :current="current" previous-margin="175rpx"
          next-margin="175rpx" @change="change">
          <swiper-item v-for="(item,index) in zthead" :key="index">
            <view class="swiper3_item" :class="current==index?'swiper2_active':''">
              <image class="" :src="item.pic" mode="widthFix"></image>
            </view>
            <span class="span">{{item.name}}</span>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="fixed_box">
      <view :class="zthead[current].css == 'col-style-2' ? 'indexbox':'indexbox2'">
        <view class="indexbox_left" v-for="(item,index) in vidoList" v-if="index%2 == 1" :key="index"
          >
          <view class="image11" @click="jumpBtn2(item.vod_url)" :style="{'backgroundImage':'url('+item.vod_pic+')' }" v-if="vidoList && item.vod_url">
          
          </view>
          <view v-else @click.stop="playBtn(item)">
            <view class="inox_left_img" v-if="item.vod_pic" :style="{'backgroundImage':'url('+item.vod_pic+')' }"></view>
            <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl2+')' }">
            </view>
            <image class="inox_left_icon" src="@/static/img/collect_btn.png" v-if="scztList.indexOf(item.vod_id) == -1"
              @click.stop="sczt(item.vod_id)" mode="widthFix"></image>
            <image class="inox_left_icon" src="@/static/img/collect_btn_active.png" v-else @click.stop="sczt(item.vod_id)"
              mode="widthFix"></image>
            <view class="inl_content">{{ item.vod_name }}</view>
          </view>
          
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        gifUrl: '',
        zthead: [],
        scztList: [],
        plus: 2,
        gifUrl2: 'https://www.tmtv777.com/img/logo.1cecf4f4.gif',
        circular: true,
        current: 0,
        vidoList: [],
        id: '',
        page: 1
      }
    },
    computed: {

    },
    onReachBottom() {
      uni.showLoading({
        title: "加载中"
      })
      this.page++;
      this.$http.tab1({
        p: this.page,
        t: this.id,
        l: 'zt'
      }).then(res => {
        if (res.code == 200) {
          if(res.data.tab1list == null){
            this.$toast('没有更多了~');
            return;
          }
          this.vidoList = this.vidoList.concat(res.data.tab1list);
          uni.hideLoading();
        }
      })
    },
    onLoad() {
      this.scztList = uni.getStorageSync('vod_id');
      this.$http.vodzt().then(res => {
        if (res.code == 200) {
          this.zthead = res.data.zthead;
          this.gifUrl = res.data.zthead[0].pic;
          this.id = res.data.zthead[0].t;
          this.tab1();
        }
      })
    },
    methods: {
      jumpBtn2(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
        // uni.navigateTo({
        //   url: '/pages/wevview?url=' + url
        // })
      },
      navigateBtn() {
        uni.navigateBack();
      },
      playBtn(item) {
        uni.navigateTo({
          url: `../player?playid=${item.vod_id}`
        })
      },
      /**
       * 收藏
       */
      sczt(scid) {
        this.scztList = uni.getStorageSync('vod_id') || [];
        this.$http.sczt({
          scid: scid,
          token: uni.getStorageSync('phone')
        }).then(res => {
          if (res.code == 200) {
            if (res.message == '收藏成功') {
              this.$toast(res.message)
              this.scztList.push(scid);
              uni.setStorageSync('vod_id', this.scztList)
            } else if (res.message == '取消收藏') {
              this.scztList = uni.getStorageSync('vod_id') || [];
              this.scztList.slice().reverse().forEach((item, index, arr1) => {
                if (item === scid) {
                  this.scztList.splice(arr1.length - 1 - index, 1);
                }
              });
              uni.setStorageSync('vod_id', this.scztList)
              this.$toast(res.message)
            }
          }
        }).catch(err => {
          let token = uni.getStorageSync('token') || 'none';
          if (token == 'none') {
            uni.showModal({
              title: '提示',
              content: "请登录！",
              success: function(res) {
                if (res.confirm) {
                  uni.reLaunch({
                    url: '/pages/login/index'
                  });
                }
              }
            })
          }
        })
      },
      tab1() {
        uni.showLoading({
          title: "加载中"
        })
        this.$http.tab1({
          p: this.page,
          t: this.id,
          l: 'zt'
        }).then(res => {
          if (res.code == 200) {
            this.vidoList = res.data.tab1list;
            uni.hideLoading();
          }
        })
      },
      change(e) {
        this.page = 1;
        let num = e.detail.current;
        this.current = num;
        this.id = this.zthead[num].t;
        this.gifUrl = this.zthead[num].pic;
        this.tab1();
      }
    }
  }
</script>

<style lang="less">
  page {
    background-color: #FFFFFF;
  }

  .swiper3_active {
    transform: scale(1.4);
  }

  .xllb {
    background: linear-gradient(90deg, #bdc3c7, #2c3e50);
    height: 300px;
    color: white;
  }

  .swiperItem {
    position: relative;
    width: 100%;
    min-height: 300rpx;
    margin-bottom: 30rpx;
  }

  .swiper3 {
    position: relative;
    width: 100%;
    height: 400rpx;
    display: flex;
    align-items: center;

    swiper-item {
      text-align: center;

      .swiper3_item {
        position: absolute;
        top: 100rpx;
        bottom: 100rpx;
        left: 100rpx;
        right: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        transition: all 0.5s ease;
        overflow: hidden;
        border-radius: 400rpx;
      }
    }
  }

  .span {
    display: block;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute !important;
    color: #FFFFFF;
  }

  .fixed_box {
    width: 100%;
    border-radius: 60rpx 60rpx 0 0;
    background-color: #FFFFFF;
    padding-top: 40rpx;
    min-height: 300rpx;

    .indexbox {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      width: 100%;

      .indexbox_left2 {
        position: relative;
        margin-left: 15rpx;
        width: 30%;
        height: 393rpx;
        border-radius: 20rpx;

        .inl_content {
          width: 100%;
          overflow: hidden;
          color: black;
          text-overflow: ellipsis;
          white-space: nowrap;
          position: absolute;
          bottom: 0rpx;
        }

        .inox_left_img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 343rpx;
          box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: 50%;
          border-radius: 20rpx;
        }

        .inox_left_icon {
          position: absolute;
          top: 15rpx;
          left: 155rpx;
          width: 70rpx;
          height: 70rpx;
        }

        .videoBox-bottom {
          position: absolute;
          bottom: 0;
          display: flex;
          -webkit-box-pack: justify;
          justify-content: space-between;
          width: 100%;
          height: 60rpx;
          background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
          color: #fff;
          font-size: 12rpx;
          border-bottom-right-radius: 13rpx;
          border-bottom-left-radius: 10rpx;

          .vib_left {
            width: 20%;
            display: flex;
            align-items: center;

            span {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 28rpx;
              color: #FFFFFF;
            }

            image {
              margin-left: 10rpx;
              width: 32rpx;
              height: 32rpx;
            }
          }

          .vib_right {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            span {
              margin-left: 10rpx;
              font-size: 28rpx;
              color: #FFFFFF;
            }

            image {
              margin-left: 5rpx;
              width: 32rpx;
              height: 32rpx;
            }
          }
        }
      }

      .indexbox_left {
        position: relative;
        margin-left: 15rpx;
        width: 47%;
        height: 310rpx;
        border-radius: 20rpx;

        .inl_content {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          color: black;
          white-space: nowrap;
          position: absolute;
          bottom: 0rpx;
        }

        .inox_left_img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 255rpx;
          box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: 50%;
          border-radius: 20rpx;
        }

        .inox_left_icon {
          position: absolute;
          top: 15rpx;
          left: 275rpx;
          width: 70rpx;
          height: 70rpx;
        }

        .videoBox-bottom {
          position: absolute;
          bottom: 0;
          display: flex;
          -webkit-box-pack: justify;
          justify-content: space-between;
          width: 100%;
          height: 60rpx;
          background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
          color: #fff;
          font-size: 12rpx;
          border-bottom-right-radius: 13rpx;
          border-bottom-left-radius: 10rpx;

          .vib_left {
            width: 20%;
            display: flex;
            align-items: center;

            span {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 28rpx;
              color: #FFFFFF;
            }

            image {
              margin-left: 10rpx;
              width: 32rpx;
              height: 32rpx;
            }
          }

          .vib_right {
            width: 80%;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            span {
              margin-right: 20rpx;
              font-size: 28rpx;
              color: #FFFFFF;
            }

            image {
              margin-right: 0;
              width: 32rpx;
              height: 32rpx;
            }
          }
        }
      }
    }
  }

  .indexbox2 {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 60rpx;

    .indexbox_left {
      position: relative;
      margin-left: 15rpx;
      width: 30%;
      height: 393rpx;
      border-radius: 20rpx;

      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        color: black;
        bottom: 0rpx;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
        height: 354rpx;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        border-radius: 20rpx;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        left: 155rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          span {
            margin-left: 10rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 5rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }
  .image11 {
    // margin-bottom: 30rpx;
    width: 100%;
    height: 100%;
    // text-align: center;
    border-radius: 20rpx;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
  
  }
</style>
